@extends('mobile.inc.common')
@section('title')
	<title>图库 - 奇异果聚合</title>
	<meta name="keywords" content="{{$cate_info->seo_key}}" />
	<meta name="description" content="{{$cate_info->seo_intro}}" />
@endsection
@section('content')
	<!--header-->
	<nav class="am-menu  am-menu-default subtitle-menu">
		<ul class="am-menu-nav am-avg-sm-5 subtitle-nav">
			<li>
				<a href="" class="i-color">萌妹萝莉 </a>
			</li>
			<li>
				<a href="">性感御姐</a>
			</li>
			<li>
				<a href="">小清新</a>
			</li>
			<li>
				<a href="">中性王道</a>
			</li>
			<li>
				<a href="" class="subtitle-more"></a>
			</li>
		</ul>
	</nav>



	<!---图库---->
	<div class="author-gallery-list " style="margin-top: 132px;">
		<div class="news-content-title news-c-d-title gallery-content-title">
			<span class="news-c-d-more-logo g-c-more"></span >
			<span class="news-c-d-more-word">热门图集</span>

		</div>
		<div class="gallery-list">
			@foreach($galleries as $v)

				@if($v->mode != 10)
					<div class="author-g-title">
						{{$v->title}}
					</div>
					<div class="author-g-tabs am-g">
						<div class="am-u-sm-10 ">
							<dl class="tab">
								@foreach($v->tags()->get() as $tag)
									<dt style="background:#{{$tag->background_color or '0C80BA'}};"><a href="{{$tag->url}}">{{$tag->name}}</a></dt>
								@endforeach
							</dl>
						</div>
						<div class="am-u-sm-2 author-tx author-g-tx">

						</div>
					</div>
					<div class="author-g-gallery a-g-g-1">
						<ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default">
							@foreach($v->images()->take(3)->get() as $value)
								<li>
									<div class="am-gallery-item">
										<a href="{{route('gallery.show_m', [$v->id])}}" class="">
											<img src="{{route('image', [trim($value->url, '/'), '93x63'])}}" alt="{{$value->title}}" />
										</a>
									</div>
								</li>
							@endforeach
						</ul>
					</div>
				@else
					<div class="author-g-gallery a-g-g-2">
						<ul data-am-widget="gallery" class="am-gallery am-avg-sm-1  am-avg-md-3 am-avg-lg-4 am-gallery-overlay" >
							<li>
								<div class="am-gallery-item">
									<a href="{{route('gallery.show_m', [$v->id])}}" class="">
										<img src="{{route('image', [trim($v->cover, '/'), '375x215'])}}" alt="{{$v->title}}" />
										<h3 class="am-gallery-title">{{$v->title}}</h3>

									</a>
								</div>
							</li>

						</ul>
					</div>
				@endif
			@endforeach
		</div>
		<div class="news-content-block news-more-btn">
			<button>加载更多</button>
		</div>
		<div class="news-content-block news-more-btn" style="display: none;">
			<button>收起列表</button>
		</div>
	</div>
	<!---图库---->
	<script>

        function genItem(gallery) {
            if(gallery.mode != 10)
                return `<div class="author-g-title">
					${gallery.title}
                    </div>
                    <div class="author-g-tabs am-g">
                    <div class="am-u-sm-10 ">
                    <dl class="tab">
                    ${gallery.tags.map(tag => `<dt style="background:#${tag.background_color ? tag.background_color : '0C80BA'};"><a href="${tag.url}">${tag.name}</a></dt>`).join('\n')}
                    </dl>
                    </div>
                    <div class="am-u-sm-2 author-tx author-g-tx">

                    </div>
                    </div>
                    <div class="author-g-gallery a-g-g-1">
                    <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default">
                    ${gallery.images.map(img =>
						`<li>
							<div class="am-gallery-item">
								<a href="{{url('gallery')}}/${gallery.id}.html" class="">
									<img src="${img.url}/93x63.jpg" alt="${gallery.title}" />
								</a>
							</div>
						</li>`
					).join('\n')}
                    </ul>
                    </div>`
            else
                return `<div class="author-g-gallery a-g-g-2">
                <ul data-am-widget="gallery" class="am-gallery am-avg-sm-1  am-avg-md-3 am-avg-lg-4 am-gallery-overlay" >
                <li>
                <div class="am-gallery-item">
                <a href="{{url('gallery')}}/${gallery.id}.html" class="">
                <img src="${gallery.cover}/375x215.jpg" alt="${gallery.title}" />
                <h3 class="am-gallery-title">${gallery.title}</h3>

                </a>
                </div>
                </li>

                </ul>
                </div>`
        }

        $(function(){
            var page = 2;
            $(".news-more-btn").click(function(){
                var cate_id = "{{$cate_info->cate_id}}";
                var token = "{{csrf_token()}}";
                var $this = $(this)
                $.ajax({
                    url:"{{url('/gallery')}}",
                    type:"get",
                    data:{page:page},
                    success:function(data){
                        if(data.length==0){
                            $this.find('button').text('没有更多了！');
                        }else {
                            data = data.data;
                            for(var i=0;i<data.length;i++){
                                $('.gallery-list').append(genItem(data[i]));
                            }
                            page += 1;
                        }
                    }
                });
            });
        });
	</script>
@endsection